// 图片切换
$(".zoom-small li").click(function(){
    $(this).prop("class","active").siblings().removeClass("active")
    $(".zoom-middle img").prop("src",$(this).children().prop("src")).parent().siblings().children().prop("src",$(this).children().prop("src"))
})

// 放大镜
// 鼠标移入事件
$(".zoom-box").hover(function(){
    $(".mask").css({"display":"block"})
    $(".zoom-big").css({"display":"block"})

    // 鼠标移动事件
    $(".zoom-box").mousemove(e=>{
        var x = e.pageX;
        var y = e.pageY;
        var left = x - $(".mask").width()/2
        var top = y - $(".mask").height()/2

        if(left < $(".zoom-box").offset().left){
            left = $('.zoom-box').offset().left
        }
        if(top < $(".zoom-box").offset().top){
            top = $('.zoom-box').offset().top
        }
        if(left > $('.zoom-box').width()+$('.zoom-box').offset().left - $(".mask").width()){
            left = $('.zoom-box').width()+$('.zoom-box').offset().left - $(".mask").width()
        }
        if(top > $('.zoom-box').height() + $('.zoom-box').offset().top - $(".mask").height()){
            top = $('.zoom-box').height() + $('.zoom-box').offset().top - $(".mask").height()
        }

        $(".mask").offset({left,top})

        var bigLeft = (left - $(".zoom-box").offset().left)/$('.zoom-box').width()*$(".zoom-big img").width()

        var bigTop = (top - $(".zoom-box").offset().top)/$('.zoom-box').height()*$(".zoom-big img").height()

        $(".zoom-big img").css({
            left:-bigLeft + "px",
            top:-bigTop + "px"
        })
    })
},function(){
    $(".mask").css("display","none")
    $(".zoom-big").css("display","none")
})

// 跳转到具体详情页
// 从商品页获取请求的具体id
var search = location.search
var arr = /id=(\d+)/.exec(search)
if(!arr){
    var loadMask = $("<div>非法请求！</div>").css({
        width:"6rem",
        height:"3rem",
        background:"#000",
        position:"fixed",
        top:"3rem",
        left:"1rem",
        "text-align":"center",
        "line-height":"300px",
        color:"red",
        "font-size":"30px",
        "font-weight":"700",
        "border-radius":"50px"
    })
    $("body").append(loadMask)
    setTimeout(function() {
        $(location).attr("href","http://localhost/$$IKEA/junhao-planet/src/goods.html")
    },2000);
}

var id = arr[1];

var loadMask = $("<div>详情加载中 . . .</div>").css({
    width:"100%",
    height:"100%",
    background:"#fff",
    opacity:"0.9",
    position:"fixed",
    top:"0",
    left:"0",
    "text-align":"center",
    "line-height":"500px",
    color:"#0058a3",
    fontSize:"32px",
    "font-weight":"700"
})
$("body").append(loadMask)
// ajax将id传到php
$.get("php/detail.php",{id},res=>{
    console.log(res);
    var {data,meta:{status,msg}} = res;
    if(status === 2){
        $(".product-name").text(data.name);
        $(".product-info").text(data.info);
        $(".bag-total-price").text(data.price);
        $(".zoom-small li img").first().prop("src",data.delay_path)
        $(".zoom-small li img").last().prop("src",data.hide_path);
        $(".zoom-middle img").prop("src",data.delay_path);
        $(".zoom-big img").prop("src",data.delay_path);
        loadMask.remove()
    }else if(status === 1){
        loadMask = $("<div>详情加载失败 . . .</div>").css({
            width:"100%",
            height:"100%",
            background:"#fff",
            opacity:"0.9",
            position:"fixed",
            top:"0",
            left:"0",
            "text-align":"center",
            "line-height":"500px",
            color:"#0058a3",
            fontSize:"32px",
            "font-weight":"700"
        })
        $("body").append(loadMask)
        setTimeout(function() {
            $(location).attr("href","http://localhost/$$IKEA/junhao-planet/src/goods.html")
        }, 1000);
    }

    // 加入购物车
    addBag()
},"json")

    // 加入购物车
    // 存储本地数据
    // 点击事件
function addBag() {
    $(".bag-buy-btn").click(function(){
        $(this).on("selectstart",function(){
            return false
        })
        $(this).text("✔")
        setTimeout(()=>{
            $(this).text("加入购物袋")
        },400)
        // 判断是否登录
        // 已登录
        if(tel){
            // 先获取本地存储，再继续加
            var data = localStorage.getItem("data")
            // 存储本地数据前先判断是否存在数据
            if(data){
                // 有本地存储数据
                var arr = JSON.parse(data);
                // 有数据就先判断是否是当前这条（同一账号的同一商品）
                var obj = arr.find(item=>item.tel === tel && item.product_id === id)
                
                if(obj){
                    // 是同一条就只增加数量
                    obj.number += 1;
                }else{
                    // 不是同一条就另外增加一条本地存储
                    var obj = {
                        product_id:id,
                        tel: tel,
                        number: 1
                    }
                    arr.push(obj)
                }
                // 无数据
            }else{
                // 没有本地存储就新建一条本地存储
                var arr = [];
                var obj = {
                    product_id:id,
                    tel: tel,
                    number: 1
                }
                arr.push(obj)
            }
            
            localStorage.setItem("data",JSON.stringify(arr))

            // 未登录
        }else{
            // 先存储下此页面的url，以便登陆成功后跳转
            localStorage.setItem("url",$(location).attr("href"))
            // 再跳转到登录页面
            $(location).attr("href","http://localhost/$$IKEA/junhao-planet/src/sign_in.html")
            // 登陆完成后获取存储过的url，直接跳转
        }
    })
}